📜 [專欄新文章] Merkle Tree in JavaScript
✍️ Johnson
📥 歡迎投稿: https://medium.com/taipei-ethereum-meetup #徵技術分享文 #使用心得 #教學文 #medium
這篇文章會說明 Merkle Tree 的運作原理,以及解釋 Merkle Proofs 的用意,並以 JavaScript / TypeScript 簡單實作出來。
本文為 Tornado Cash 研究系列的 Part 1,本系列以 tornado-core 為教材,學習開發 ZKP 的應用,另兩篇為:
Part 2:ZKP 與智能合約的開發入門
Part 3:Tornado Cash 實例解析
Special thanks to C.C. Liang for review and enlightenment.
本文中實作的 Merkle Tree 是以 TypeScript 重寫的版本,原始版本為 tornado-core 以 JavaScript 實作而成,基本上大同小異。
Merkle Tree 的原理
在理解 Merkle Tree 之前,最基本的先備知識是 hash function,利用 hash 我們可以對資料進行雜湊,而雜湊後的值是不可逆的,假設我們要對 x 值做雜湊,就以 H(x) 來表示,更多內容可參考:
一次搞懂密碼學中的三兄弟 — Encode、Encrypt 跟 Hash
SHA256 Online
而所謂的 Merkle Tree 就是利用特定的 hash function,將一大批資料兩兩進行雜湊,最後產生一個最頂層的雜湊值 root。
當有一筆資料假設是const leaves = [A, B, C, D],我們就用function Hash(left, right),開始製作這顆樹,產生H(H(A) + H(B))與H(H(C) + H(D)),再將這兩個值再做一次 Hash 變成 H(H(H(A) + H(B)) + H(H(C) + H(D))),就會得到這批資料的唯一值,也就是 root。
本文中使用的命名如下:
root:Merkle Tree 最頂端的值,特色是只要底下的資料一有變動,root 值就會改變。
leaf:指單一個資料,如 H(A)。
levels:指樹的高度 (height),以上述 4 個資料的假設,製作出來的 levels 是 2,levels 通常會作為遞迴的次數。
leaves:指 Merkle Tree 上的所有資料,如上述例子中的 H(A), H(B), H(C), H(D)。leaves 的數量會決定樹的 levels,公式是 leaves.length == 2**levels,這段建議先想清楚!
node:指的是非 leaves 也非 root 的節點,或稱作 branch,如上述例子中的H(H(A) + H(B)) 和 H(H(C) + H(D))。
index:指某個 leaf 所在的位置,leaf = leaves[index],index 如果是偶數,leaf 一定在左邊,如果是奇數 leaf 一定在右邊。
Merkle Proofs
Merkle Proofs 的重點就是要證明資料有沒有在樹上。
如何證明?就是提供要證明的 leaf 以及其相對應的路徑 (path) ,經過計算後一旦能夠產生所需要的 root,就能證明這個 leaf 在這顆樹上。
因此這類要判斷資料有無在樹上的證明,類似的說法有:proving inclusion, proving existence, or proving membership。
這個 proof 的特點在於,我們只提供 leaf 和 path 就可以算出 root,而不需要提供所有的資料 (leaves) 去重新計算整顆 Merkle Tree。這讓我們在驗證資料有沒有在樹上時,不需要花費大量的計算時間,更棒的是,這讓我們只需要儲存 root 就好,而不需要儲存所有的資料。
在區塊鏈上,儲存資料的成本通常很高,也因此 Merkle Tree 的設計往往成為擴容上的重點。
我們知道 n 層的 Merkle Tree 可以存放 2**n 個葉子,以 Tornado Cash 的設計來說,他們設定 Merkle Tree 有 20 層,也就是一顆樹上會有 2**20 = 1048576 個葉子,而我們用一個 root 就代表了這 1048576 筆資料。
接續上段的例子,這顆 20 層的 Merkle Tree 所產生的 Proof ,其路徑 (path) 要從最底下的葉子 hash 幾次才能到達頂端的 root 呢?答案就是跟一棵樹的 levels 一樣,我們要驗證 Proof 所要遞迴的次數就會是 20 次。
在實作之前,我們先來看 MerkleTree 在 client 端是怎麼調用的,這有助於我們理解 Merkle Proofs 在做什麼。
基本上一個 proof 的場景會有兩個人:prover 與 verifier。
在給定一筆 leaves 的樹,必定產生一特定 root。prover 標示他的 leaf 在樹上的 index 等於 2,也就是 leaves[2] == 30,以此來產生一個 proof,這個 proof 的內容大致上會是這個樣子:
對 verifier 來說,他要驗證這個 proof,就是用裡面的 leaf 去一個一個與 pathElements 的值做 hash,上述就是 H('30', 40) 後得出 node,再 hash 一次 H('19786...', node) 於是就能得出這棵樹的 root。
重點來了,這麼做有什麼意義?它的巧思在於對 verifier 來說,他只需要儲存一個 root,由 prover 提交證明給他,經過計算後產生的 root 如果跟 verifier 儲存的 root 一樣,那就證明了 prover 所提供的資料確實存在於這個樹上。
而 verifier 若不透過 proof ,要驗證某個 leaf 是否存在於樹上,也可以把 leaves = [10, 20 ,leaf ,40]整筆資料拿去做 MerkleTree 的演算法跑一趟也能產生特定的 root。
但由 prover 先行計算後所提交的 proof,讓 verifier 不必儲存整批資料,也省去了大量的計算時間,即可做出某資料有無在 Merkle Tree 上的判斷。
Sparse Merkle Tree
上述能夠證明資料有無在樹上的 Merkle Proofs 是屬於標準的 Merkle Tree 的功能。但接下來我們要實作的是稍微不一樣的樹,叫做 Sparse Merkle Tree。
Sparse Merkle Tree 的特色在於除了 proving inclusion 之外,還可以 proving non-inclusion。也就是能夠證明某筆資料不在某個 index,例如 H(A) 不在 index 2 ,這是一般 Merkle Tree 沒辦法做到的。
而要做到 non-membership 的功能其實也不難,就是我們要在沒有資料的葉子裡補上 zero value,或是說 null 值。更多內容請參考:What’s a Sparse Merkle Tree。
實作細節
本節將完整的程式碼分成三個片段來解釋。
首先,這裡使用的 Hash Function 是 MiMC,主要是為了之後在 ZKP 專案上的效率考量,你可以替換成其他較常見的 hash function 例如 node.js 內建 crypto 的 sha256:
crypto.createHash("sha256").update(data.toString()).digest("hex");
這裡定義簡單的 Merkle Tree 介面有 root, proof, and insert。
首先我們必須先給定這顆樹的 levels,也就是樹的高度先決定好,樹所能容納的資料量也因此固定為 2**levels 筆資料,至於要不要有 defaultLeaves 則看創建 Merkle Tree 的 client 自行決定,如果有 defaultLeaves 的話,constructor 就會跑下方一大段計算,對 default 資料開始作 hash 去建立 Merkle Tree。
如果沒有 defaultLeaves,我們的樹也不會是空白的,因為這是顆 Sparse Merkle Tree,這裡使用 zeroValue 作為沒有填上資料的值,zeros 陣列會儲存不同 level 所應該使用的 zero value。假設我們已經填上第 0 筆與第 1 筆資料,要填上第 2 筆資料時,第 2 筆資料就要跟 zeros[0] 做 hash,第 2 筆放左邊, zero value 放右邊。
我們將所有的點不論是 leaf, node, root 都用標籤 (index) 標示,並以 key-value 的形式儲存在 storage 裡面。例如第 0 筆資料會是 0–0,第 1 筆會是 0–1,這兩個 hash 後的節點 (node) 會是 1–0。假設 levels 是 2,1–0 節點就要跟 1–1 節點做 hash,即可產出 root (2–0)。
後半部份的重點在於 proof,先把 proof 和 traverse 看懂,基本上就算是打通任督二脈了,之後有興趣再看 insert 和 update。
sibling 是指要和 current 一起 hashLeftRight 的值…也就是相鄰在兩旁的 leaf (or node)。
到這裡程式碼的部分就結束了。
最後,讓我們回到一開始 client 調用 merkleTree 的例子:
以及 proof 的內容:
前面略過了 proof 裡頭的 pathIndices,pathIndices 告訴你的是當前的 leaf (or node) 是要放在左邊,還是放在右邊,大概是這個樣子:
if (indices == 0) hash(A, B);if (indices == 1) hash(B, A);
有興趣的讀者可以實作 verify function 看看就會知道了!
原始碼
TypeScript from gist
JavaScript from tornado-core
參考
Merkle Proofs Explained
What’s a Sparse Merkle Tree?
延伸:Verkle Tree
Merkle Tree in JavaScript was originally published in Taipei Ethereum Meetup on Medium, where people are continuing the conversation by highlighting and responding to this story.
👏 歡迎轉載分享鼓掌
同時也有1部Youtube影片,追蹤數超過2萬的網紅Untyped 對啊我是工程師,也在其Youtube影片中提到,有沒有人納悶過為什麼凱心琳我每次開場都要講 "Hello World" 呢? "Hello World"的由來是什麼?為什麼程式語言 C 要叫 C? 為什麼 C++ 要叫做 C++? JavaScript 跟 Java 之間的關係?電腦程式語言有多少種?電腦為什麼要有桌面?滑鼠游標為什麼是斜的?還有...
「javascript path」的推薦目錄:
- 關於javascript path 在 Taipei Ethereum Meetup Facebook 的最佳解答
- 關於javascript path 在 โปรแกรมเมอร์ไทย Thai programmer Facebook 的最佳解答
- 關於javascript path 在 BorntoDev Facebook 的最佳解答
- 關於javascript path 在 Untyped 對啊我是工程師 Youtube 的最佳貼文
- 關於javascript path 在 How do I parse a URL into hostname and path in javascript? 的評價
- 關於javascript path 在 Node.js Path Module - JavaScript Tutorial 的評價
- 關於javascript path 在 Simple path join and dirname functions for generic javascript 的評價
- 關於javascript path 在 取得svg裡的path節點| 歷史共業 的評價
- 關於javascript path 在 Graph API - Web SDKs - Documentation - Facebook for ... 的評價
- 關於javascript path 在 How to get drupal module path in javascript? 的評價
javascript path 在 โปรแกรมเมอร์ไทย Thai programmer Facebook 的最佳解答
มีคำถามแฟนพันธุ์แท้ มาถามเล่นๆ
HTML ที่โปรแกรมเมอร์สายเว็บรู้จักกันดี
เห็นเรียกกันติดปากว่าภาษา HTML
.
แต่ฝรั่งไม่จัดว่ามันคือภาษาเขียนโปรแกรม
(Programming language)
.
ไม่ใช่ภาษาเขียนโปรแกรมที่แท้ทรู
ไม่อยู่ในกลุ่มเช่น C, C++, C#, Java, Python, JavaScript, PHP ฯลฯ
เพราะอะไร ทำไมกัน???? 🤔
.
.
.
.
.
.
.
.
.
.
++++++++++++++++++++++++++++
<ประชาสัมพันธ์ ขายหนังสือ/>
“โปรแกรมเมอร์ก็รวยได้ ด้วยเส้นทางเอาท์ซอร์สสายดำ”
ความยาว 176 หน้า กระดาษ A5 (≈ 41,002 คำ)
แบ่งเป็น 2 เวอร์ชั่น
.
👉 1) เวอร์ชั่นพิเศษเป็น PDF
ปรินต์ออกมานอนเกาพุงอ่านได้ ราคา 330 ฿
ติดต่อสั่งซื้อไดที่ไลน์ @269aibvq (เฉพาะ PDF เท่านั้น)
ตั้งแต่วันนี้ ถึง 13 ตุลาคม 2563
.
👉 2) เวอร์ชั่นอีบุ๊กอ่านผ่านโปรแกรมของเว็บ mebmarket
ไม่มีแจก PDF ปรินต์ออกมาไม่ได้
ราคาถูกลงมาหน่อย 250 บาท ฿
กับ 279 บาท ฿ (ซื้อผ่านระบบ Apple)
.
รายละเอียดอ่านเพิ่มเติมได้ที่่ 👇
https://www.patanasongsivilai.com/…/sale_book_rich_with_ou…/
.
สำหรับตัวอย่างหนังสือ ดาวน์โหลดได้ตามลิงก์ข้างล่าง 👇
https://drive.google.com/open…
.
✍ เขียนโดย โปรแกรมเมอร์ไทย thai programmer
Got a big fan question to ask for fun
HTML at web line programmer, well known.
It's called in HTML language.
.
But foreigner doesn't consider it a programming language.
(Programming language)
.
Not a true programming language.
Not in groups like C, C, C ++, C #, Java, Python, JavaScript, PHP etc
Why why???? 🤔
.
.
.
.
.
.
.
.
.
.
++++++++++++++++++++++++++++
< Public relations for book sale />
′′ Programmer can also be rich by the black-line outsworth path
Length 176 pages h̄n̂ā (≈ 41,002 words)
divided into 2 versions
.
👉 1) Special version as PDF
The printing comes out to sleep and scratching belly. Reading. Price is 330 ฿
Contact to order Line @ 269 aibvq (only PDF)
From today to 13 October 2563
.
👉 2) Ebook version, read through the program of Mebmarket web.
No PDF printing is not coming out
Price is cheap. 250 baht ฿
With 279 baht) (buy via Apple system)
.
For details, please read more at 👇
https://www.patanasongsivilai.com/blog/sale_book_rich_with_outsource/
.
For the download book preview, follow the link below 👇
https://drive.google.com/open?id=1tAnMozeYd63dcbBGTQmT_ZrpSaamZS3e
.
✍ Written by Thai programmer thai coderTranslated
javascript path 在 BorntoDev Facebook 的最佳解答
🔥 ถามมากันเยอะ ว่าอยากทำเว็บแบบนั้น แบบนี้ต้องรู้อะไรบ้าง !? วันนี้แอดจะมาบอกแนวทางการเรียนรู้ไปพร้อมกันน <3
.
โดยจะต้องบอกคร่าว ๆ ก่อนว่า "ไม่ว่าเราจะทำเว็บอะไร แบบไหนก็แล้วแต่ ล้วนต้องมีพื้นฐานมาก่อนเหมือนกันทั้งสิ้น !!"
.
คล้าย ๆ กับการเรียนภาษาอังกฤษนั่นแหละ ถ้าเราเริ่มต้นเราก็อาจจะต้องเริ่มจากตัวอักษรภาษาอังกฤษ การใช้ Tense ต่าง ๆ ของเว็บก็มีเช่นกัน โดย Basic ของเว็บจะมีเรื่อง
.
✅ HTML
เป็นโครงหลักของเว็บไซต์ทั่วไป โดยหน้าตาของภาษา HTML นั้นจะเป็นการใช้ tag ที่เริ่มต้นด้วย <> แล้วปิดด้วย > เพื่อสร้างชิ้นส่วนต่างๆในหน้าเว็บเรียกว่า Element
.
✅ CSS
CSS นั้นเป็นสิ่งที่ช่วยเพิ่มความสวยงามให้กับหน้าตาของเว็บ เราสามารถปรับแต่งหน้าตาของเว็บได้จาก CSS ไม่ว่าจะเป็นสี รูป ไปจนถึงตำแหน่งของสิ่งต่างๆ หรือแม้แต่การทำ animation ก็สามารถทำได้
.
✅ JavaScript
JavaScript นั้นเป็นส่วนที่เพิ่มความสามารถให้กับเว็บของเราเป็นอย่างมาก ทำให้ส่วนต่างๆของเว็บสามารถทำงานได้ตามที่เราต้องการ
.
และ เมือเรารู้พื้นฐานตรงนี้แล้ว เราจะมีเส้นทาง 2 ทางหลักให้เลือก โดยมีทางที่ชื่อว่าสาย Front-End และ Back-End ส่วนถ้าใครชอบทั้งคู่ จนไปครบจบกระบวนการที่เว็บควรมีเราจะเรียกว่า Full-Stack นั่นเอง
.
⭐️ โดยเริ่มจาก Fornt-End กันก่อน
มันเป็นส่วนหน้าตาการแสดงผลของเว็บไซต์ ที่ผู้ใช้งาน(Client)มองเห็นทั้งหมดไม่ว่าจะเป็น ตัวหนังสือ ปุ่ม หรือแถบเมนูต่างๆ ทุกๆส่วนที่ผู้ใช้เห็นและมีปฏิสัมพันธ์ด้วยนับว่าอยู่ใน Frontend ทั้งหมด ซึ่งภาษาที่ใช้ในฝั่ง Frontend ก็คือ HTML, CSS และ JavaScript
.
✅ Framework
สิ่งอำนวยความสะดวกในการเขียนโปรแกรม ซึ่งประกอบด้วยชุดคำสั่งหรือองค์ประกอบต่างๆ ให้เราสามารถนำมาใช้ได้ง่ายๆ โดยไม่ต้องเขียนเองทั้งหมด
.
Js CSS
Angular Bootstrap
Vue.js Materialize
React Semantic UI
Backbone.js Bulma
.
⭐️ ตามมาด้วย Back-End กันต่อ
ส่วนการทำงานประมวลผล และ จัดเก็บข้อมูลของเว็บไซต์ เพื่อทำให้ส่วนของ Frontend สามารถทำงานได้อย่างถูกต้องสมบูรณ์
.
✅ Programming language
เราจะต้องใช้ภาษาโปรแกรมมิ่งในส่วนของการทำงานใน Backend เช่น เมื่อรับข้อมูลสินค้าที่ผู้ใช้เลือกมาจาก Frontend, Backend ก็จะนำมาคำนวนโปรโมชั่นแล้วนำมาหักลบกับเงินในบัญชีจากนั้นเก็บข้อมูลใน Database เป็นต้น
.
PHP
Python
C#
Java
JavaScript
Ruby
.
✅ Framework
สิ่งอำนวยความสะดวกในการเขียนโปรแกรม ซึ่งประกอบด้วยชุดคำสั่งหรือองค์ประกอบต่างๆ ให้เราสามารถนำมาใช้ได้ง่ายๆ โดยไม่ต้องเขียนเองทั้งหมด
Django
Express.js
Flask
Laravel
Ruby on Rails
ASP.NET
.
⭐️ส่วนสำคัญอื่นๆ
นอกจากส่วนของการแสดงผลและการติดต่อกับผู้ใช้อย่าง Frontend และ ส่วนของการทำงานด้านหลังของระบบอย่าง Backend แล้ว การเขียนเว็บยังมีส่วนที่สำคัญที่ขาดไปไม่ได้ เช่น ส่วนของการรับส่งข้อมูล
.
✅ API
Application Programming Interface เป็นช่องทางในการเข้าถึงข้อมูลต่างๆ ของเว็บไซต์ ไม่ว่าจะเป็นการอ่านเขียนข้อมูลจากฐานข้อมูลจาก server ไปจนถึงข้อมูลจากภายนอก
.
✅ WebSocket
วิธีการติดต่อเพื่อรับส่งข้อมูลแบบระหว่าง Client กับ Server โดยแต่ละฝั่งสามารถส่งข้อมูลไปหาอีกฝั่งตอนไหนก็ได้ เหมาะสำหรับรับส่งข้อมูลแบบ real-time
.
"ทั้งหมดนี้ก็เป็นเส้นทาง Path คร่าว ๆ ของสายเว็บ หากใครชอบของสวย ๆ งาม ๆ ก็อาจจะทำส่วนหน้าบ้าน ใครชอบ Logic จัด ๆ มาหลังบ้านก็สนุกไม่น้อยนะแอดว่าาา <3"
.
#borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
javascript path 在 Untyped 對啊我是工程師 Youtube 的最佳貼文
有沒有人納悶過為什麼凱心琳我每次開場都要講 "Hello World" 呢?
"Hello World"的由來是什麼?為什麼程式語言 C 要叫 C? 為什麼 C++ 要叫做 C++? JavaScript 跟 Java 之間的關係?電腦程式語言有多少種?電腦為什麼要有桌面?滑鼠游標為什麼是斜的?還有好多好多疑問!電腦科學軟體工程的世界中真的有很多奇怪的事,讓我們一起和軟體工程師 Tim (Richard?) & Kid大探究竟吧!
其實想做這一集已經很久了,題目也老早就準備好了~只是願意參與的工程師真的不多呀😂 感謝Tim跟Kid的用心參與!!
📢 📣 📢 本頻道影片內容有輸出成 podcast 📢 📣 📢
雖然這一集用 podcast 聽可能有點混亂,但還是有輸出成音檔唷!
可以在各大podcast平台搜尋「Untyped 對啊我是工程師」
請大家多多支持呀!!🙏🏻💁🏻♀️
這集會聊到...
Overview 💬
🔹 "Hello World"的由來是什麼?
🔹 為什麼程式語言 C 要叫 C?
🔹 為什麼 C++ 要叫做 C++? C#?
🔹 JavaScript 跟 Java 的關係是什麼?
🔹 printf 的 f 是什麼意思?
🔹 電腦程式語言有多少種?
🔹 電腦為什麼要有桌面?
🔹 工程師口中都是什麼蟲 bug? ?
🔹 滑鼠游標為什麼是斜的?
🔹 第一台電腦的名字?
🔹 PHP代表?
【㊫ 電腦科學/軟體工程 學習資源 📖】
全端工程師密技 Full Stack Eng - Career Path (Codecademy)
https://bit.ly/3niTwLN
前端工程師密技 Front End Eng - Career Path (Codecademy)
https://bit.ly/32K1eql
用Scala學習函式程式設計
https://bit.ly/2IF0Thv
Scala 函数式程式設計原理
https://bit.ly/3kBQXTb
平行程式設計
https://bit.ly/3pCeaZf
Android 應用程式開發 專項課程
https://bit.ly/3lGCUwW
普林斯頓大學 電腦科學 演算法 基礎理論
https://bit.ly/3nxomAh
Go 語言學起來
https://bit.ly/35AWhlv
Parallel, Concurrent, and Distributed Programming in Java 專項課程
https://bit.ly/2IGnlH4
Java 軟體工程基礎課程
https://bit.ly/3fa4gJi
全端開發 跨平台手機app 開發 完整課程
https://bit.ly/2UCGWum
#php是個人快樂鬆餅 #HelloWorld是在哈囉 #冷知識大賽
一定要看到影片最後面並且在「YouTube影片下方」按讚留言訂閱分享唷!
每隔週星期四晚上9點更新,請記得開啟YouTube🔔通知!
-
【愛屋及烏】
YouTube 👉 https://www.youtube.com/c/Untyped對啊我是工程師
Podcast 👉 https://open.spotify.com/show/3L5GRMXmq1MRsliQt43oi2?si=3zgvfHlETeuGfp9rIvwTdw
Facebook 臉書粉專 👉 https://www.facebook.com/untyped/
Instagram 👉 https://www.instagram.com/untypedcoding/
合作邀約 👉 untypedcoding@gmail.com
-
Untyped 對啊我是工程師 - There are so many data types in the world of computer science, so are the people who write the code. We aim to UNTYPE the stereotype of engineers and of how coding is only for a certain type of people.
凱心琳: 一個喜歡電腦科學邏輯推理,在科技圈努力為性別平等奮鬥的工程師。
【Disclaimer 聲明】
Some links are affiliated.
上面有些連結是回饋連結,如果你透過這些連結購買商品,我可以得到一些小獎勵,但不會影響到你購買的價格,甚至會是更低的價格!謝謝你的支持💕

javascript path 在 Node.js Path Module - JavaScript Tutorial 的推薦與評價
In this tutorial, you will learn about the Node.js path module and its handy methods for manipulatting file paths effectively. ... <看更多>
javascript path 在 Simple path join and dirname functions for generic javascript 的推薦與評價
Joins path segments. Preserves initial "/" and resolves ".." and "." // Does not support using ".." to go above/outside the root. ... <看更多>
javascript path 在 How do I parse a URL into hostname and path in javascript? 的推薦與評價
... <看更多>
相關內容